@extends('admin.layout.base')
@section('styles')
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-list">
            <div class="panel-header"><div class="panel-title"> 广告位管理 </div></div>
            <el-alert type="primary" :closable="false">
                <template slot="title">
                    <i class='fa fa-bullhorn'></i> 调用广告位广告的时候，直接根据广告位标识进行查询
                </template>
            </el-alert>
            <div class="panel-main">
                <div class="panel-btns">
                    <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                </div>
                <div class="panel-search">
                    <div class="panel-search-item">
                        <el-input  size="medium" v-model="params.kwd" clearable placeholder="请输入广告位名称或者标识" class="input-with-select">
                            <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </div>
                <el-table v-loading="loading"
                          element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          :data="listData.data" border>
                    <el-table-column prop="title" label="名称" width="150"></el-table-column>
                    <el-table-column align="center" prop="name" label="标识" width="250"></el-table-column>
                    <el-table-column align="center" label="尺寸" width="120">
                        <template slot-scope="scope">
                            @{{ scope.row.width }} x @{{ scope.row.height }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="description" :show-overflow-tooltip="true" label="描述" width="200"></el-table-column>
                    <el-table-column align="center" prop="created_at" label="添加日期" width="165"></el-table-column>
                    <el-table-column label="操作" >
                        <template slot-scope="scope">
                            <el-button @click="ads(scope.row.id)" icon="fa fa-adn" type="warning" size="mini" plain> 广告</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"  v-if="listData && listData.total">
                    <div class="pagination-total">共 <em> @{{listData.total}} </em> 条记录</div>
                    <el-pagination v-if="listData.last_page > 1"
                                   background
                                   :page-size="listData.per_page"
                                   layout="prev, pager, next, jumper"
                                   :total="listData.total"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   :current-page="listData.current_page"
                                   @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],//列表数据
                    params: {page: 1, kwd: '', status: 0},
                    loading: false,
                    form:null,
                }
            },
            created(){
                this.list();
            },
            methods: {
                //广告
                ads(id){
                    window.location.href = "{{ route('admin.ad.index') }}" + '?id=' + id;
                },
                //分页
                changePage(val) {
                    this.params.page = val;
                    this.list();
                },
                //列表
                list(){
                    let that = this;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('admin.adsense.list') }}",this.params,function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.listData = res.data;
                                that.loading = false;
                            }
                        },'JSON');
                    },500);
                },
                //筛选
                search(){
                    this.params.page = 1;
                    this.list();
                },
            }
        });
    </script>
@endsection
